<template>
  <div>
    <div>
      颜色差权重：<input type="number" v-model.number="maxdiff">
      寻路速度：<input type="number" v-model.number="seekPathBuffer"/>
      <input type="file" accept="image/*" @change="onFile">    <button @click="clearPaths">重置</button>
      <b>{{ msg }}</b>
    </div>

    <img v-show="false" ref="image" :src="imgUrl" @load="imgReady" alt="">

    <div>
      <canvas ref="canvas" @click="onCanvasClick"></canvas>
    </div>
  </div>
</template>

<script>
import { goSolve } from '../lib/matrix'

export default {
  data () {
    return {
      msg: '',
      imgUrl: require('../assets/maze.png'),
      clickPoints: [],
      width: 0,
      height: 0,
      maxdiff: 300,
      seekPathBuffer: 100,
      seeking: false
    }
  },
  methods: {
    async onFile ({ target }) {
      const { files } = target
      const vm = this
      if (files.length) {
        vm.msg = '正在处理图片。。。'
        vm.imgUrl = URL.createObjectURL(files[0])
      }
    },
    imgReady () {
      this.clearPaths()
      this.msg = '点击图片任意位置决定起点与终点'
    },
    drawPath (paths) {
      const { canvas } = this.$refs
      const context = canvas.getContext('2d')
      context.fillStyle = "#FF0000"
      for (let path of paths) {
        context.fillRect(path[0], path[1], 1, 1)
      }
    },
    async onCanvasClick (e) {
      const { clickPoints, width, height } = this
      const { image } = this.$refs
      clickPoints.push([e.offsetX, e.offsetY])
      const { length } = clickPoints
      if (length >= 1) {
        this.msg = `起点: (x: ${e.offsetX}, y: ${e.offsetY})`
      }
      if (length >= 2) {
        this.msg = `终点: (x: ${e.offsetX}, y: ${e.offsetY}), 正在扫描可通行区域`

        try {
          this.msg = '正在计算最短路径。。。'
          const startPoint = clickPoints[length - 2]
          const endPoint = clickPoints[length - 1]
          this.seeking = true
          let { paths, checkCount } = await goSolve(image.src, startPoint, endPoint, this.maxdiff, this.seekPathBuffer)
          this.seeking = false
          this.drawPath(paths)

          this.msg = `成功计算最短路径，实际距离 ${paths.length}，探索了节点数 ${checkCount}`
        } catch (err) {
          this.msg = err
          throw err
        }
      }
    },
    clearPaths () {
      const { image, canvas } = this.$refs
      const { width, height } = image
      canvas.width = width
      canvas.height = height

      const context = canvas.getContext('2d')
      context.drawImage(image, 0, 0, width, height);

      this.width = width
      this.height = height

      this.clickPoints = []
      this.msg = ''
      this.seeking = false
    },
    drawStep (e) {
      let { detail } = e
      const { canvas } = this.$refs
      const context = canvas.getContext('2d')
      context.fillStyle = "#74b9ff"
      for (let node of detail) {
        const { x, y, distance } = node
        context.fillRect(x, y, 1, 1)
      }
    }
  },
  created () {
    window.vm = this
    window.addEventListener('node-step', this.drawStep)
  },
  beforeDestroy () {
    window.removeEventListener('node-step', this.drawStep)
  }
}
</script>
